import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Layout, Menu } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import Navigation from '../../components/Navigation';
// import './workbench.css';

const { Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('首页', '1', <PieChartOutlined />),
    getItem(<NavLink to='/guo/pay'>果币充值</NavLink>, '2', <DesktopOutlined />),
    getItem('财务', '9', <FileOutlined />),
    getItem(<NavLink to='/guo/order'>订单</NavLink>, '5', <FileOutlined />),
    getItem('商品', 'sub1', <UserOutlined />, [
      getItem(<NavLink to='/guo/shop'>商品管理</NavLink>, '4'),
        getItem(<NavLink to='/workbench/scene'>商品详情模板</NavLink>, '3'),
    ]),
    getItem('店铺', 'sub2', <TeamOutlined />),
];

const Index: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);

    return (
        <div >
            <div className='workbench_top'>
                <Navigation />
            </div>
            <Layout style={{ marginTop: "10px", backgroundColor: 'pink' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} theme="light">
                    <Menu theme="light" defaultSelectedKeys={['1']} mode="inline" items={items} className='menu' />
                </Sider>
                <Layout>
                    <Outlet />
                </Layout>
            </Layout>
        </div>
    );
};

export default Index;